<div class="shopmsglist">
	<div class="user-shop-message col-md-12">
		<div class="user-shop-name">店铺持有者</div>
		<p id="username"></p>
	</div>

	<div class="user-shop-message col-md-12">
		<div class="user-shop-name">手机号</div>
		<p id="phone"></p>
	</div>
	<div class="tips"></div>
	<div class="user-shop-message col-md-12">
		<div class="user-shop-name">店铺名称</div>
		<input type="text" id="shopName" name="username" placeholder="店铺名称"/>
	</div>

	<div class="user-shop-img-houtai col-md-12">
		<div class="user-shop-name">店铺封面</div>
		<div class="shoplogo">
			<img src="/img/default.jpg"/>
		</div>
		<div class="img-button">
			<button type="button" class="btn btn-primary logoclick">修改图片</button>
			<input id="logoPic" type="file" class="hidden-val">
		</div>
	</div>
</div>
<div class="shopmsg">
	<button id="saveShopMsg" class="btn btn-success">保存信息</button>
</div>

<script type="text/javascript">
	$(function (){
		doGetShopMsg();
		$(".logoclick").click(function (){
			$("#logoPic").click();
		});
		$("#saveShopMsg").click(function (){
			let shopName = $("#shopName").val();
			let logo = $("#mainContentId").data("logo");
			let shopMsg = $("#mainContentId").data("shop");
			let params;
			if (shopName===shopMsg.shopName){
				params={"logo":logo};
				$(".tips").empty();
			}else{
				params={"shopName":shopName,"logo":logo};
			}
			let url = `/shop/saveShopMsg`;
			$.ajax({
				url:url,
				type:"post",
				data:params,
				dataType:"json",
				success(result) {
					if (result.status===200){
						alert("修改成功!")
					}else{
						alert(result.msg);
					}
				},
				error() {
					alert("修改失败");
				}
			});
		});
	});

	$("#shopName").change(function (){
		let param = $("#shopName").val();
		let shopMsg = $("#mainContentId").data("shop");
		if (param===shopMsg.shopName){
			$(".tips").empty();
			return ;
		}


		let url = `/shop/ssoshopName`;
		$.ajax({
			url:url,
			data:param,
			success (result) {
				if (result.status === 200) {
					$(".tips").empty();
					$(".tips").append(`<div class="alert alert-success" role="alert">该名称可以使用</div>`);
				} else {
					$(".tips").empty();
					$(".tips").append(`<div class="alert alert-danger" role="alert">改昵称已重复!请更换!</div>`);
				}
			},
			error(){
				$(".tips").empty();
				$(".tips").append(`<div class="alert alert-danger" role="alert">服务器请求失败..</div>`);
			}
		});
	});

	function doGetShopMsg(){
		let shopMsg = $("#mainContentId").data("shop");
		doLoadShopMsg(shopMsg);
	}

	function doLoadShopMsg(shopmsg){
		$("#username").text(shopmsg.username);
		$("#phone").text(shopmsg.phone);
		$("#shopName").val(shopmsg.shopName);
		$(".shoplogo").empty();
		$(".shoplogo").append(`<img src="${shopmsg.logo}">`);
	}

	$("#logoPic").change(function (){
		let img = this.files;
		if(img.length==0){
			return ;
		}
		$(".shoplogo").empty();
		$(".shoplogo").append(domakepic(img[0]));
	});

	function domakepic(imgUrl){
		let reader = new FileReader();
		reader.readAsDataURL(imgUrl);
		reader.onload = function (){
			$("#mainContentId").data("logo",reader.result);
			$(".shoplogo").append(`<img src="${reader.result}" name="logo"/>`);
		}
	}
</script>